// yarn add react-transition-group
import React, { PureComponent } from "react";
import { CSSTransition } from "react-transition-group";
import "./index.css";
class index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      tdBl: true,
    };
  }
  render() {
    const { tdBl } = this.state;

    return (
      <div>
        <button onClick={(e) => this.handleClick()}>
          {tdBl ? "关" : "开"}
        </button>
        <CSSTransition in={tdBl} // 开关 
        timeout={1500}  // active时间
        classNames="cssTran" // xx-enter 的css类名开头
        appear // 首次显示
        // 下面是生命函数
        onEnter={e=>{console.log('onEnter',e)}}
        onEntering={e=>{console.log('onEntering',e)}}
        onEntered={e=>{console.log('onEntered',e)}}
        onExit={e=>{console.log('onExit',e)}}
        onExiting={e=>{console.log('onExiting',e)}}
        onExited={e=>{console.log('onExited',e)}}
        >
          <div className="cssDonHua1">123</div>
        </CSSTransition>
      </div>
    );
  }

  handleClick() {
    this.setState({
      tdBl: !this.state.tdBl,
    });
  }
}

export default index;
